<template>
  <div :class="{'mobile-table mobile-min-height':showMobilePage}" class="table-list min-fill-page">
    <dataDisplay :data-list="dataList" :class="{'click-data': dimension}" style="margin-bottom: 20px;" class="mobile-data data-margin" @handleNumClick="handleNumClick"/>
    <div v-if="!showMobilePage" class="filter-input-box" style="margin-bottom: 8px;">
      <FilterInput
        v-model="filterInput"
        :filter-list="filterList"
        :drawer-size="450"
        :is-show-config="Boolean(dimension)"
        :preset-type="2"
        show-search-btn
        class="weibo-tool"
        @queryEmpty="queryEmpty"
        @handelClick="queryClick"
        @changeValue="changeValue"
        @deleteTagBefore="deleteTagBefore"
        @filterTagStatus="filterTagStatus" />
      <div class="table-top-opeator-bar">
        <el-button v-if="hasRouteAuth('crm:accounts:weibo') && !dimension" :loading="batchLoading" style="margin-right: 10px;" size="small" type="primary" @click.native="handleBatchProcess">批量处理</el-button>
        <el-button plain type="primary" size="small" class="click-btn" @click="batchCopyLink"><span>复制微博链接</span></el-button>
        <btnGroup
          v-if="hasRouteAuth('crm:accounts:export')"
          ref="exportRef"
          :list="[
            {label:'导出', exportApi:'/admin/weibo/export', exportName:'微博', beforeExport: beforeExport, type: 'export'},
          ]"
        />
      </div>
    </div>
    <div v-loading="loading" style="min-height: 300px">
      <u-table
        v-if="list.items.length > 0"
        ref="customerTableRef"
        :data="list.items"
        :border="true"
        :row-height="49"
        :height="setTableHeight"
        beautify-table
        header-drag-style
        use-virtual
        class="fb-table"
        element-loading-text="加载中..."
        empty-text="暂无数据"
        header-cell-class-name="order-data-header-cell"
        fit
        hightlight-current-row
        @select="selectTable"
        @select-all="selectTable"
      >
        <u-table-column :fixed="selectFixed" align="center" type="selection" width="50"/>
        <u-table-column align="left" label="发布文案" min-width="120">
          <template slot-scope="scope">
            <div class="flex-center icon-box">
              <p v-if="showIcon(scope.row)">互</p>
              <ToolTip :content="scope.row.text" />
            </div>
          </template>
        </u-table-column>
        <u-table-column v-if="dimension" :key="Math.random()" align="left" label="@人员" min-width="100">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.contentAccount" />
          </template>
        </u-table-column>
        <u-table-column v-if="dimension" :key="Math.random()" align="left" label="外链" min-width="100">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.contentLink" />
          </template>
        </u-table-column>
        <u-table-column v-if="dimension" :key="Math.random()" align="left" label="话题" min-width="100">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.contentTopic" />
          </template>
        </u-table-column>
        <u-table-column align="left" label="发布链接" min-width="100">
          <template slot-scope="scope">
            <el-tooltip
              v-if="scope.row.link && (scope.row.link.indexOf('http://') === 0 || scope.row.link.indexOf('https://') === 0)"
              :open-delay="800"
              class="item"
              placement="top"
              effect="dark">
              <div slot="content" style="max-width: 200px;">{{ scope.row.link }}</div>
              <a
                :href="scope.row.link"
                target="_blank"
                class="link-name light-word">
                点击跳转<img src="../../../assets/medium/publish-link.png" alt="link-icon">
              </a>
            </el-tooltip>
            <ToolTip v-else :content="scope.row.link" />
          </template>
        </u-table-column>
        <u-table-column align="left" label="账号" min-width="100">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.account" is-can-click @handelClick="toAccountDetail(scope.row.accountId)" />
          </template>
        </u-table-column>
        <u-table-column v-if="!dimension" :key="Math.random()" align="left" label="运营人员">
          <template slot-scope="scope">
            <ToolTip :content="getOperators(scope.row.accountOperation)" />
          </template>
        </u-table-column>
        <u-table-column align="left" label="发布时间" width="150">
          <template slot-scope="scope">
            <div v-if="scope.row.publishTime">{{ scope.row.publishTime | standardFormat('YYYY/MM/DD HH:mm') }}</div>
            <div v-else>--</div>
          </template>
        </u-table-column>
        <u-table-column v-if="dimension" :key="Math.random()" align="left" label="截图" min-width="150">
          <template slot-scope="scope">
            <FileShowList
              :file-list="scope.row.screenshot ? [{name: '截图', time: '', url: scope.row.screenshot}] : null"
              :table-single="true"
              :show-image="true"
              :single-row-img="false"
              is-show-single-file
            />
          </template>
        </u-table-column>
        <u-table-column v-if="dimension" :key="Math.random()" align="left" label="发现异常时间" min-width="150">
          <template slot-scope="scope">
            <div v-if="scope.row.abnormalTime">{{ scope.row.abnormalTime | standardFormat('YYYY/MM/DD') }}</div>
            <div v-else>--</div>
          </template>
        </u-table-column>
        <u-table-column v-if="dimension" :key="Math.random()" align="left" label="更新时间" min-width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.updateTime">{{ scope.row.updateTime | standardFormat('YYYY/MM/DD') }}</div>
            <div v-else>--</div>
          </template>
        </u-table-column>
        <u-table-column v-if="dimension" :key="Math.random()" align="left" label="系统订单" min-width="100">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.orderSn" :is-can-click="Boolean(scope.row.orderId) || Boolean(scope.row.projectId)" @handelClick="toOrderDetail(scope.row)" />
          </template>
        </u-table-column>
        <u-table-column align="left" label="监测数据" min-width="250">
          <template slot-scope="scope">
            <el-tooltip placement="top">
              <span
                v-for="(item, index) in getPublishDataIcon"
                slot="content"
                :key="index">{{ item.tip }} : {{ scope.row.monitoringData[item.key] | bigDataFilter }}&emsp;</span>
              <div class="publish-data">
                <img :src="defaultIcon" style="cursor:pointer;" alt="icon" @click="openChart(scope.row)">
                <span
                  v-for="(item, index) in getPublishDataIcon"
                  :key="index"
                  :class="{'last-item': index === 2}"
                  :style="{ marginLeft: scope.row.link ? '0' : '20px'}"
                  class="publish-data-item">
                  {{ item.tip }} : {{ scope.row.monitoringData[item.key] | bigDataFilter }}
                </span>
              </div>
            </el-tooltip>
          </template>
        </u-table-column>
        <u-table-column v-if="!dimension" :key="Math.random()" align="left" label="健康状态">
          <template slot-scope="scope">
            <StatusText
              v-if="scope.row.healthStatus || scope.row.healthStatus === 0"
              :color="['#31CC9C', '#FF4E5F', '#406EFF'][scope.row.healthStatus]"
              :text="scope.row.healthStatus | weiboStatus" />
            <div v-else>--</div>
          </template>
        </u-table-column>
        <u-table-column v-if="!dimension" :key="Math.random()" align="left" label="未达标原因" min-width="120">
          <template slot-scope="scope">
            <el-tooltip v-if="scope.row.reason" placement="top">
              <div slot="content" v-html="(scope.row.reason).replace(/\r\n/g, '<br />')" />
              <div class="ellipsis-text">{{ scope.row.reason }}</div>
            </el-tooltip>
            <div v-else>--</div>
          </template>
        </u-table-column>
        <u-table-column :key="Math.random()" align="left" label="是否转发" min-width="86">
          <template slot-scope="scope">
            <StatusText
              v-if="scope.row.isForward || scope.row.isForward === 0"
              :color="['#31CC9C', '#999'][scope.row.isForward]"
              :text="scope.row.isForward | formatForwardStatus" />
            <span v-else>--</span>
          </template>
        </u-table-column>
        <u-table-column align="left" label="采集状态" min-width="140">
          <template slot-scope="scope">
            <StatusText
              v-if="scope.row.pickStatus || scope.row.pickStatus === 0"
              :color="['#FD8546', '#31CC9C', '#FF4E5F', '#999'][scope.row.pickStatus]"
              :text="pickStatus(scope.row.pickStatus)" />
          </template>
        </u-table-column>
        <u-table-column :width="showMobilePage ? 50 : (dimension ? 80 : 130)" :align="operateAlign" :fixed="showMobilePage?false:'right'" label="操作">
          <template slot-scope="scope">
            <div v-if="!showMobilePage" style="display:flex;">
              <div class="button-text" @click="copyLink(scope.row)">复制链接</div>
              <el-dropdown v-if="!dimension" trigger="click">
                <div class="el-dropdown-link">
                  <el-button class="button-text" type="text"><span style="font-size:14px;">更多<i class="el-icon-arrow-down"/></span></el-button>
                </div>
                <el-dropdown-menu slot="dropdown" style="margin-top:-24px;margin-right:15px;padding: 0;">
                  <el-dropdown-item v-if="!(scope.row.healthStatus === 1 && scope.row.pickStatus === 0)" :disabled="scope.row.pickStatus !== 0" style="text-align: center" @click.native="handleStop(scope.row.id)">
                    <div>停止采集</div>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="hasRouteAuth('crm:accounts:weibo') && scope.row.healthStatus === 1 && scope.row.pickStatus === 0" style="text-align: center" @click.native="handleProcess(scope.row.id)">
                    <div>处理确认</div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <tableOperateBtn v-else>
              <el-dropdown-item style="width:90px;text-align: center" @click.native="copyLink(scope.row)">
                <div style="font-size: 14px">复制链接</div>
              </el-dropdown-item>
              <el-dropdown-item v-if="!(scope.row.healthStatus === 1 && scope.row.pickStatus === 0) && !dimension" :disabled="scope.row.pickStatus !== 0" style="width:90px;text-align: center" @click.native="handleStop(scope.row.id)">
                <div>停止采集</div>
              </el-dropdown-item>
              <el-dropdown-item v-if="hasRouteAuth('crm:accounts:weibo') && scope.row.healthStatus === 1 && scope.row.pickStatus === 0 && !dimension" style="width:90px;text-align: center" @click.native="handleProcess(scope.row.id)">
                <div>处理确认</div>
              </el-dropdown-item>
            </tableOperateBtn>
          </template>
        </u-table-column>
      </u-table>
      <empty-placeholder v-else-if="!list.isInit" style="margin-bottom: 24px" />
    </div>
    <el-row v-if="showMobilePage" type="flex" justify="left">
      <el-pagination
        v-show="list.total > 0"
        :current-page.sync="list.page"
        :page-size="list.perPage"
        :total="list.total"
        :small="true"
        :page-sizes="[20, 50, 100, 250, 500]"
        :layout="pageLayout"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>
    <monitoringChart ref="monitoringChart" />
    <stopPickingCom ref="stopPicking" @submit="handleStopPicking" />
    <fixed-pagination>
      <template v-if="!showMobilePage">
        <div class="pagi-container">
          <SelectionNum :select-item="multipleSelectionAll" @clearMixinSelection="clearMixinSelection" />
        </div>
        <el-pagination
          v-show="list.total > 0"
          :current-page="list.page"
          :page-size="list.perPage"
          :total="list.total"
          :page-sizes="[20, 50, 100, 250, 500]"
          layout="total, prev, pager, next, sizes, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </template>
      <template v-else>
        <FilterInput
          v-model="filterInput"
          :filter-list="filterList"
          :drawer-size="450"
          :is-show-config="Boolean(dimension)"
          show-search-btn
          show-mobile-icon
          class="weibo-tool"
          @queryEmpty="queryEmpty"
          @handelClick="queryClick"
          @changeValue="changeValue"
          @deleteTagBefore="deleteTagBefore"
          @filterTagStatus="filterTagStatus" />
        <el-button plain type="primary" size="small" class="click-btn mr0" @click="batchCopyLink"><span>复制微博链接</span></el-button>
        <el-button v-if="hasRouteAuth('crm:accounts:weibo')" :loading="batchLoading" style="margin-right: 10px;" size="small" type="primary" @click.native="handleBatchProcess">批量处理</el-button>
        <btnGroup
          v-if="hasRouteAuth('crm:accounts:export')"
          ref="exportRef"
          :list="[
            {label:'导出', exportApi:'/admin/weibo/export', exportName:'微博', beforeExport: beforeExport, type: 'export'},
          ]"
        />
      </template>
    </fixed-pagination>
  </div>
</template>

<script>
import TableAdaptive from '@/mixins/tableAdaptive';
import { paramsRangeFormat } from '@/utils/paramsFormat';
import { getWeiboList, processWeibo, stopPicking, getWeiboStatistics } from '@/api/accounts';
import TableSelections from '@/mixins/tableSelections';
import mobileTable from '@/mixins/mobileTable';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import { standardFormat } from '@/filters/date';
import { pickStatus, weiboStatus } from '@/filters/status';
import defaultIcon from '@/assets/lookData.png';
import { bigDataFilter } from '@/filters/number';
import monitoringChart from '../components/monitoringChart';
import stopPickingCom from '../components/stopPicking';
import { hasRouteAuth } from '@/utils/permission';
import { compare } from '@/components/HealthValue/utils';
import btnGroup from '@/components/Common/baseComponent/btnGroup';
import dataDisplay from '@/components/Common/baseComponent/dataDisplay';
import FileShowList from '@/components/CreateOrder/fileShowList';
import icon_14 from '@/assets/dataDisplay/icon_14.png';
import icon_15 from '@/assets/dataDisplay/icon_15.png';
import icon_53 from '@/assets/dataDisplay/icon_53.png';

export default {
  components: {
    EmptyPlaceholder,
    monitoringChart,
    stopPickingCom,
    btnGroup,
    dataDisplay,
    FileShowList
  },
  provide() {
    return {
      setFilterParams: (data) => {
        // 筛选
        if (data.params) {
          this.filterInput = _.cloneDeep(data.params);
        }
      }
    };
  },
  filters: {
    standardFormat,
    pickStatus,
    bigDataFilter,
    weiboStatus,
    formatForwardStatus(status) {
      return ['否', '是'][status] || '--';
    }
  },
  mixins: [TableAdaptive, TableSelections, mobileTable],
  props: {
    dimension: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      page: 1,
      perPage: 20,
      loading: false,
      batchLoading: false,
      dataLoading: false,
      data: {
        total: null,
        underStandard: null
      },
      filterInput: {},
      defaultIcon,
      list: {
        total: 0,
        page: 1,
        perPage: 20,
        items: [],
        isInit: true
      },
      idKey: 'id',
      isUmyTable: true,
      tableRefName: 'customerTableRef',
      isFormat: true,
      healthOptions: [
        { value: 0, label: '达标' },
        { value: 1, label: '未达标' },
        { value: 2, label: '已处理' }
      ],
      pickOptions: [
        { value: 0, label: '采集中' },
        { value: 1, label: '完成' },
        { value: 2, label: '停止' },
        { value: 3, label: '已删文/采集失败' }
      ],
      isSnOrderOptions: [
        { value: 1, label: '是' },
        { value: 2, label: '否' }
      ],
      rangeKeyArr: [
        { attr: 'createTime', start: 'createTimeStart', end: 'createTimeEnd', type: 'time' },
        { attr: 'abnormalTime', start: 'abnormalTimeStart', end: 'abnormalTimeEnd', type: 'time', addTime: true },
        { attr: 'updateTime', start: 'updateTimeStart', end: 'updateTimeEnd', type: 'time', addTime: true }
      ]
    };
  },
  computed: {
    dataList() {
      const arr = [{ label: '监测微博数量', data: this.data.total, tooltip: this.dimension ? '统计搜索结果中最近7日内的微博数' : '统计24小内监测到的内容', isCanFilter: false, icon: icon_14, isMoney: false }];
      if (!this.dimension) {
        arr.push({ label: '未达标数量', data: this.data.underStandard, tooltip: '统计24小内监测到的内容，不包含已处理微博', isCanFilter: false, icon: icon_15, isMoney: false });
      } else {
        arr.push({ label: '异常微博数', data: this.data.abnormalWeibo, tooltip: '统计搜索结果中所有状态异常的微博数', isCanFilter: false, icon: icon_53, isMoney: false });
        arr.push({ label: '7日内异常微博数', data: this.data.abnormalWithinSeven, tooltip: '统计搜索结果中最近7日内状态异常的微博数', isCanFilter: false, icon: icon_53, isMoney: false });
      }
      return arr;
    },
    forwardOptions() {
      return [{
        value: 0,
        label: '否'
      }, {
        value: 1,
        label: '是'
      }];
    },
    filterList() {
      let arr = [
        { keyword: 'title', name: '发布文案', type: 'input', class: this.filterClass },
        { keyword: 'operator', name: '运营人员', type: 'input', placeholder: '请输入运营人员', class: this.filterClass },
        { keyword: 'account', name: '账号', type: 'input', placeholder: '请输入账号名称', class: this.filterClass },
        { keyword: 'createTime', name: '发布时间', type: 'rangeDate', format: 'yyyy/MM/dd HH:mm', class: this.filterClass },
        { keyword: 'pickStatus', name: '采集状态', type: 'select', options: this.pickOptions },
        { keyword: 'isForward', name: '是否转发', type: 'select', options: this.forwardOptions }
      ];
      if (this.dimension) {
        arr = arr.concat([
          { keyword: 'abnormalTime', name: '发现异常时间', timeType: 'daterange', type: 'rangeDate', class: this.filterClass },
          { keyword: 'updateTime', name: '更新时间', timeType: 'daterange', type: 'rangeDate', class: this.filterClass },
          { keyword: 'isSnOrder', name: '系统订单', type: 'select', options: this.isSnOrderOptions },
          { keyword: 'withContentTag', name: '互动标签', type: 'select', options: this.isSnOrderOptions },
          { keyword: 'atAccount', name: '@人员', type: 'select', options: this.isSnOrderOptions },
          { keyword: 'withLink', name: '外链', type: 'select', options: this.isSnOrderOptions },
          { keyword: 'withTopic', name: '话题', type: 'select', options: this.isSnOrderOptions }
        ]);
      }
      if (!this.dimension) {
        arr.push({ keyword: 'healthStatus', name: '健康状态', type: 'select', options: this.healthOptions });
      }
      return arr;
    },
    getPublishDataIcon() {
      const arr = [
        { key: 'forward', icon: 'share', tip: '转发' },
        { key: 'comment', icon: 'comment', tip: '评论' },
        { key: 'like', icon: 'like', tip: '点赞' }
      ];
      return arr;
    },
    tableOutsideHeight() {
      return 246;
    },
    filterClass() {
      return this.showMobilePage ? '' : 'weiboFilterTool';
    }
  },
  watch: {
    dimension(val) {
      this.clearMixinSelection();
      this.fetchData();
    }
  },
  created() {
    this.formatQuery();
    this.fetchData(true);
  },
  methods: {
    hasRouteAuth,
    pickStatus,
    showIcon(row) {
      if (!this.dimension) return false;
      return !row.orderSn && (row.contentAccount || row.contentLink || row.contentTopic);
    },
    getWeiboStatistics(params) {
      this.dataLoading = true;
      getWeiboStatistics(params).then(res => {
        if (res.code === 200) {
          this.data = res.data;
          this.dataLoading = false;
        }
      }).catch(err => {
        this.dataLoading = false;
        console.error(err.message);
      });
    },
    formatParams() {
      const params = JSON.parse(JSON.stringify(this.filterInput));
      paramsRangeFormat(this.rangeKeyArr, params);
      params.origin = this.dimension;
      if (params.origin) {
        delete params.healthStatus;
      }
      delete params.createTime;
      delete params.abnormalTime;
      delete params.updateTime;
      return params;
    },
    fetchData(reset = false) {
      if (reset) this.page = 1;
      const params = this.formatParams();
      this.loading = true;
      this.getWeiboStatistics(params);
      const pageParams = { ...params };
      pageParams.page = this.page;
      pageParams.perPage = this.perPage;
      getWeiboList(pageParams).then(res => {
        if (res.code === 200) {
          this.list = res.data;
          this.loading = false;
          this.list.isInit = false;
          if (this.setSelectRow) this.setSelectRow(res.data.items);
        }
      }, _ => {
        this.loading = false;
      }).catch(err => {
        this.$message.error(err.message);
      });
    },
    formatQuery() {
      const { status, operator, account, createTimeStart, createTimeEnd, pickStatus, abnormalTime } = this.$route.query;
      if (!this.dimension) {
        let result;
        if (status || status === 0) {
          result = Number(status);
        } else if (status === null) {
          result = null;
        } else {
          result = 1;
        }
        this.$set(this.filterInput, 'healthStatus', result);
      }
      this.$set(this.filterInput, 'operator', operator || null);
      this.$set(this.filterInput, 'account', account || null);
      this.$set(this.filterInput, 'pickStatus', pickStatus ? Number(pickStatus) : null);
      this.$set(this.filterInput, 'abnormalTime', abnormalTime || null);
      if (createTimeStart) {
        const end = createTimeEnd || Math.round(new Date() / 1000);
        this.$set(this.filterInput, 'createTime', [createTimeStart * 1000, end * 1000]);
      }
    },
    formatText(str) {
      return str.replace(/\r\n/, '<br/>');
    },
    deleteTagBefore(key) {
      if (key === 'createTime') {
        delete this.filterInput.createTimeStart;
        delete this.filterInput.createTimeEnd;
      }
    },
    changeValue(data) {
      const { createTime } = data;
      if (createTime) {
        this.$set(this.filterInput, 'createTimeStart', createTime[0] / 1000);
        this.$set(this.filterInput, 'createTimeEnd', createTime[1] / 1000);
      }
    },
    queryClick() {
      this.fetchData(true);
    },
    queryEmpty() {
      this.filterInput = {};
      this.fetchData(true);
    },
    openChart(row) {
      const result = row.healthValue.sort(compare('time'));
      this.$refs['monitoringChart'].activeName = 0;
      this.$refs['monitoringChart'].openDialog(row.id, result);
    },
    getOperators(data) {
      let res = '';
      if (!data || !data.length) {
        res = '--';
      } else {
        res = data.map(it => it.userName).join(',');
      }
      return res;
    },
    toAccountDetail(id) {
      const url = this.$router.resolve({
        name: 'accountsDetail',
        params: { id }
      });
      window.open(url.href, '_blank');
    },
    handleStop(id) {
      this.$refs['stopPicking'].openDialog(id);
    },
    handleStopPicking(id) {
      stopPicking({ id }).then(res => {
        if (res.code === 200) {
          this.$message.success('操作成功');
          this.fetchData();
          this.$refs['stopPicking'].handleClose();
        }
      }).catch(err => {
        this.$message.error(err.message);
      });
    },
    copyLink(row) {
      const link = row.account + '：' + row.link;
      this.$copyText(link).then(() => {
        this.$message.success('复制成功');
      }, e => {
        console.error(e);
      });
    },
    batchCopyLink() {
      const arr = this.multipleSelectionAll.length ? this.multipleSelectionAll : this.list.items;
      const links = arr.map(it => it.account + '：' + it.link).join('\n');
      this.$copyText(links).then(() => {
        this.$message.success('复制成功');
      }, e => {
        console.error(e);
      });
    },
    handleProcess(id) {
      this.$confirm(
        '确认后该条微博视为已处理，不再进行通知提醒',
        '未达标微博处理',
        {
          customClass: `stop-message ${this.showMobilePage ? ' mobile-message' : ''}`
        }
      ).then(() => {
        processWeibo({ ids: String(id) }).then(res => {
          if (res.code === 200) {
            this.$message.success('操作成功');
            this.fetchData();
            this.batchLoading = false;
          }
        }, _ => {
          this.batchLoading = false;
        }).catch(err => {
          this.$message.error(err.message);
        });
      }).catch(() => {
        return;
      });
    },
    handleBatchProcess() {
      if (!this.multipleSelectionAll.length) {
        this.$message.warning('请勾选需要处理的账号');
        return;
      }
      this.$confirm(
        '确认后选中的微博视为已处理，不再进行通知提醒',
        '未达标微博处理',
        {
          customClass: `stop-message ${this.showMobilePage ? ' mobile-message' : ''}`
        }
      ).then(() => {
        this.batchLoading = true;
        if (this.multipleSelectionAll.length) {
          const ids = this.multipleSelectionAll.map(it => it.id).join(',');
          processWeibo({ ids }).then(res => {
            if (res.code === 200) {
              this.$message.success('操作成功');
              this.fetchData();
              this.batchLoading = false;
            }
          }, _ => {
            this.batchLoading = false;
          }).catch(err => {
            this.$message.error(err.message);
          });
        } else {
          processWeibo().then(res => {
            if (res.code === 200) {
              this.$message.success('操作成功');
              this.batchLoading = false;
            }
          }, _ => {
            this.batchLoading = false;
          }).catch(err => {
            this.$message.error(err.message);
          });
        }
      }).catch(() => {
        return;
      });
    },
    beforeExport() {
      if (!this.multipleSelectionAll.length && (JSON.stringify(this.filterInput) === '{}' || Object.values(this.filterInput).every(it => !it))) {
        this.$message.warning('请勾选需要导出的账号');
        return;
      }
      const params = this.formatParams();
      params.ids = this.multipleSelectionAll.map(it => it.id).join(',');
      if (this.$refs.exportRef) {
        this.$refs.exportRef.btnExport(params);
      }
    },
    handleSizeChange(val) {
      this.perPage = val;
      this.fetchData(true);
      this.$nextTick(() => {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
      });
    },
    handleCurrentChange(toPage) {
      this.page = toPage;
      this.fetchData();
      this.$nextTick(() => {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
      });
    },
    toOrderDetail(row) {
      let url;
      if (row.orderId) {
        url = this.$router.resolve({
          name: 'orderDetail',
          params: { orderId: row.orderId }
        });
      } else if (row.projectId) {
        url = this.$router.resolve({
          name: 'projectChildDetail',
          params: { id: row.projectId }
        });
      }
      window.open(url.href, '_blank');
    },
    handleNumClick(index) {
      if (!this.dimension) return;
      const end = Date.parse(new Date());
      const start = end - 604800000;
      if (index === 0 || index === 2) {
        this.$set(this.filterInput, 'createTime', [start, end]);
      }
      if (index === 1 || index === 2) {
        this.$set(this.filterInput, 'pickStatus', 3);
      }
      this.fetchData();
    }
  }
};
</script>

<style lang="scss" scoped>
.mobile-table {
  .data-margin {
    margin-bottom: 12px !important;
  }
}
.table-list {
  .click-data {
    &::v-deep {
      .num {
        cursor: pointer;
      }
    }
  }
  .icon-box {
    p {
      margin: 0 2px 0;
      padding: 0 5px;
      border-radius: 16px;
      font-size: 12px;
      color: #FD8546;
      background-color: #FDEFE9;
    }
  }
  .click-btn {
    margin: 0 10px 0 0;
    padding: 0 5px;
    height: 32px;
    background:#fff;
    color:#406eff;
    span {
      font-size: 14px;
    }
  }
  .mr0 {
    margin-right: 0;
  }
  .ellipsis-text {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .light-word{
    color: #406eff;
  }
  .link-name{
    display: flex;
    align-items: center;
    img{
      width: 14px;
      height: 15px;
      margin-left: 4px;
    }
  }
  .pagi-container {
    flex:1;
    height: 32px;
    display: flex;
    align-items: center;
  }
  .publish-data{
    display: flex;
    align-items: center;
    img{
      width: 16px;
      height: 16px;
      margin-right: 4px;
    }
    .img-container {
      display: flex;
    }
    .ml20 {
      margin-left: 20px;
    }
    .publish-data-item{
      display: inline-block;
      width: 108px;
      &.last-item{
        width: 93px;
      }
    }
  }
  .el-dropdown-link {
    display: block;
    position: relative;
    padding-left:6px;
    margin-left: 6px;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -7px;
      width: 1px;
      background: #ddd;
      height: 14px;
    }
  }
}
</style>
<style lang="scss">
.stop-message {
  .el-message-box__message {
    font-size: 14px;
    width: 100%;
  }
  .el-message-box__title {
    height: 16px;
    &::before {
      position: relative;
      content: '';
      width: 3px;
      height: inherit;
      display: inline-block;
      background-color: #406EFF;
      vertical-align: bottom;
      position: relative;
      top: 0px;
      margin-right: 6px;
    }
    span {
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }
  }
}
.weiboFilterTool {
  width: 320px !important;
}
</style>
